<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">危机管理</div></el-col>
        <el-col :span="3" :offset="17" :xl="{span: 3, offset: 17}">
          <el-button v-if="this.menuList.includes('crisisListExcel')" type="primary" plain size="medium" @click="exportFn()">导出</el-button>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24" class="centerTable">
        <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="operation"></simple-table>
      </el-row> -->
      <el-row class="centerTable">
        <el-col :span="24">
          <el-table :data="tableData" v-loading="tableConfig.load" :style="tableConfig.style" :max-height="tableConfig.maxHeight" :border=tableConfig.border :size="tableConfig.size">
            <template v-for="(item, index) of tableConfig.config">
              <el-table-column v-if="item.id === 'operation'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
                <template slot-scope="scope">
                  <el-button v-for="n in item.list" :key="n.id" @click="examine(scope.row, n.id, scope.$index)" type="text" size="small" :class="n.className">{{n.name}}</el-button>
                </template>
              </el-table-column>
              <el-table-column v-else :label="item.name" :key="index" :prop="item.id" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :type="item.type"></el-table-column>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import simpleTable from '@/components/simpleTable.vue'
import {APIGETCRISISLIST} from '@/common/api.js'
export default {
  components: { downloadApi, simpleTable },
  data () {
    return {
      api: '',
      currentPage: 1,
      total: 0,
      page: 1,
      menuList: [],
      tableData: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        border: true,
        config: [
          {
            name: '姓名',
            id: 'real_name',
            align: 'center',
            modelValue: ''
          },
          {
            name: '年级',
            id: 'grade_title',
            align: 'center',
            modelValue: ''
          },
          {
            name: '班级',
            id: 'class_title',
            align: 'center',
            modelValue: ''
          },
          {
            name: '问题',
            id: 'question',
            align: 'center',
            modelValue: ''
          },
          {
            name: '压力感知',
            id: 'pressure_perception',
            align: 'center',
            modelValue: ''
          },
          {
            name: '学习倦怠',
            id: 'learning_burnout_4',
            align: 'center',
            modelValue: ''
          },
          {
            name: '网络成瘾',
            id: 'internet_addiction',
            align: 'center',
            modelValue: ''
          },
          {
            name: '欺负',
            id: 'bully',
            align: 'center',
            modelValue: ''
          },
          {
            name: '受欺负',
            id: 'be_bullied',
            align: 'center',
            modelValue: ''
          },
          {
            name: '自伤倾向',
            id: 'self_injury',
            align: 'center',
            modelValue: ''
          },
          {
            name: '焦虑',
            id: 'anxious',
            align: 'center',
            modelValue: ''
          },
          {
            name: '抑郁',
            id: 'depressed',
            align: 'center',
            modelValue: ''
          },
          {
            name: '自杀意念',
            id: 'commit_suicide',
            align: 'center',
            modelValue: ''
          },
          {
            id: 'operation',
            name: '操作',
            fixed: 'right',
            list: [
              {id: 'report', name: '查看报告'}
            ]
          }
        ]
      }
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.Api = downloadApi
    this.tableList()
  },
  methods: {
    operation (val) {
      if (val.id === 'report') {
        window.open(this.Api + '/api/report/getRecommendIndividualReportView?report_id=' + val.rows.id + '&token=' + window.sessionStorage.getItem('token'))
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    tableList () {
      APIGETCRISISLIST({
        page: this.page
      }).then((res) => {
        if (res.status === 1) {
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          this.tableData = res.data.list
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    exportFn () { // 导出
      window.location.href = this.Api + '/api/school/getCrisisListExport?token=' + window.sessionStorage.getItem('token')
    }
  }
}
</script>
<style>
.center{
  margin-top: 20px;
}
</style>
